<template>
	<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">

		<hx-navbar title="确认订单" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
			transparent="auto"></hx-navbar>
		<view class="container">
			<view class="collection_info">
				<image :src="orderInfo.item.image" mode="aspectFit" class="collect_image"></image>
				<view class="title">{{orderInfo.item.name}}
					<view>
						*{{orderInfo.quantity}}
					</view>
				</view>
			</view>
			<view class="order_info_box">
				<block>
					<view class="order_info_item">
						订单编号
						<view class="color-3">
							{{ orderId || '' }}
						</view>
					</view>
					<view class="order_info_item">
						订单金额
						<view class="">
							￥{{ orderInfo.amount|fp}}
						</view>
					</view>
					<view class="order_info_item">
						创建时间
						<view class="">
							{{ orderInfo.createTime | filterTime}}
						</view>
					</view>
				</block>
			</view>
			<view class="pay_type_list" :style="[selStyle]" v-if="showSelect">
				<radio-group name="pay_type" @change="pay_type_change">
					<block>
					<view class="pay_item" v-if="walletStatus.xtStatus==1">
						<image :src="payments[1].icon" mode="aspectFill" class="pay_icon"></image>
						<view class="" style="flex: 1;">
							<view class="">
								{{ payments[1].name}}
							</view>
						</view>
						<radio :value="payments[1].code" active-color="yellow"
							:checked="current_code==payments[1].code" />
					</view>
						<view class="pay_item" v-if="walletStatus.hfStatus==1">
							<image :src="payments[0].icon" mode="aspectFill" class="pay_icon"></image>
							<view class="" style="flex: 1;">
								<view class="">
									{{ payments[0].name}}
								</view>
							</view>
							<radio :value="payments[0].code" active-color="yellow"
								:checked="current_code==payments[0].code" />
						</view>


						<view class="pay_item" v-if="walletStatus.sdStatus==1">
							<image :src="payments[2].icon" mode="aspectFill" class="pay_icon"></image>
							<view class="" style="flex: 1;">
								<view class="">
									{{ payments[2].name}}
								</view>
							</view>
							<radio :value="payments[2].code" active-color="yellow"
								:checked="current_code==payments[2].code" />
						</view>


					</block>
				</radio-group>

			</view>

      <view class="pay_type_list" :style="[selStyle]" v-else>
        <radio-group name="pay_type">
          <block>
            <view class="pay_item" v-if="payWay==2">
              <image :src="payments[0].icon" mode="aspectFill" class="pay_icon"></image>
              <view class="" style="flex: 1;">
                <view class="">
                  {{ payments[0].name}}
                </view>
              </view>
              <radio :value="payments[0].code" active-color="yellow"
                     checked />
            </view>
            <view class="pay_item" v-if="payWay==7">
              <image :src="payments[1].icon" mode="aspectFill" class="pay_icon"></image>
              <view class="" style="flex: 1;">
                <view class="">
                  {{ payments[1].name}}
                </view>
              </view>
              <radio :value="payments[1].code" active-color="yellow"
                     checked />
            </view>


            <view class="pay_item" v-if="payWay==5">
              <image :src="payments[2].icon" mode="aspectFill" class="pay_icon"></image>
              <view class="" style="flex: 1;">
                <view class="">
                  {{ payments[2].name}}
                </view>
              </view>
              <radio :value="payments[2].code" active-color="yellow"
                     checked />
            </view>


          </block>
        </radio-group>

      </view>

			<view class="order_info_box" v-if="ifshow && tableData.length>0">
				<view class="">
					请选择需要解冻的卢克订单
				</view>
				<view class="">
					<view class="table-container"
						:class="[{'activity_detail_black':ktheme =='black'},{'activity_detail_purple':ktheme =='purple'}]">
						<view class="table-header">
							<view class="table-cell" style="width: 9%;">
								<u-checkbox :value="tabchecked" :active-color="ktopicAdaptationColors"
									@change="clearAllCheckboxes"></u-checkbox>
							</view>
							<view class="table-cell" style="width: 20%;">编号</view>
							<view class="table-cell" style="width: 25%;">订单号</view>
							<view class="table-cell" style="width: 22%;">下单时间</view>
							<view class="table-cell" style="width: 23%;">订单来源</view>
						</view>
						<view v-for="(item, index) in tableData" :key="index" class="table-row">
							<view class="table-cell" style="width: 9%;text-align: center;">
								<u-checkbox :active-color="ktopicAdaptationColors" :value="item.checked"
									@change="handleCheckboxChange(index, item)"></u-checkbox>
							</view>
							<view class="table-cell" style="width: 20%;">{{ item.tokenId }}</view>
							<view class="table-cell" style="width: 25%;">{{ item.ebusinessId }}</view>
							<view class="table-cell" style="width: 22%;">{{ item.orderTime }}</view>
							<view class="table-cell" style="width: 23%;">{{item.platform}}</view>
						</view>
					</view>

				</view>
			</view>
		</view>
		<uni-popup ref="bindingDialog" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'" :isMaskClick="false">
				<view class="store-view store-border-all tips-padding"
					:style="{'background':kbackgroundColor,color:knormalColor}"
					:class="[{'alert-border-black alert-border-shadow-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">
					<text class="popup-title"></text>
					<text class="popup-subtitle">{{tiMesee}}</text>
					<view class="tips-bottom">
						<view class="tips-button"
							:class="[{'tips-cancel-bg-black':ktheme =='black'},{'tips-cancel-bg-white':ktheme =='purple'}]"
							@click="bindingClose()">关闭</view>
						<view class="tips-button" :style="{background:kbuttonBgColor}" @click="bindingCheck()">去充值
						</view>
					</view>
				</view>
			</uni-popup>
		<view class="" style="height: 200rpx;"></view>
		<view class="footWrap" :style="{'background-color':ktabbarBgColor}">
			<view class="btn" :style="{background:buttonBcak}" @tap="submit()" v-if="orderInfo.status == 0">立即购买</view>
			<view class="btn" :style="{background:buttonBcak}" v-if="orderInfo.status == 1">已支付</view>
			<view class="btn" :style="{background:buttonBcak}" v-if="orderInfo.status == 2">已取消</view>
		</view>

		<!-- <paypass ref="passbox" @confirm="set_done"></paypass> -->
	</view>
</template>

<script>
	export default {
		filters: {
			filterTime(val) {
				return uni.$u.timeFormat(parseInt(val), 'yyyy-mm-dd hh:MM:ss')
			}
		},
		// mixins: [orders],
		data() {
			return {
				tiMesee:"",
				selStyle: {
					'--selBcakborder': this.$store.state.selBcakborder,
					'--topicAdaptationColors': this.$store.state.topicAdaptationColors,
				},
				payments: [{
						id: 1,
						icon: '../../static/image/payto.png',
						name: '汇付天下',
						code: 'huifupay'
					},
					{
						id: 2,
						icon: '../../static/image/zwlogo.png',
						name: '系统钱包',
						code: 'balancepay'
					},
					{
						id: 3,
						icon: '../../static/image/sandLogo.png',
						name: '杉德支付',
						code: 'sdpay'
					},
				],
				current_code: null,
				ifshow: false,
				tabchecked: false,
				tableData: [],
				maxChecked: 3, // 允许的最大选中数量
				buttonBcak: this.$store.state.buttonBcak, //按钮颜色
				orderId: 0,
				recharge: 0,
				type: 1, // 订单类型 1商品订单 2充值订单
				orderInfo: {
					item: {
						image: ''
					}
				}, // 订单详情
				userInfo: {}, // 用户信息
				form_id: 0,
				pay_type: '',
				goods_code: '',
				submiting: false,
				payWay: null,
				showSelect: true,
				cid: 0,
				nftIdList: [],
				walletStatus: "",

				payVal:''

			};
		},
		components: {},
		onLoad(options) {
			this.getWalletStatus()
			this.nftType = options.type
			// this.payWay = options.payWay
			if(this.nftType==2){
		     	this.payWay=options.payWay
				this.showSelect = false
			}
			this.orderId = options.order_id;
			let arrayData = options.unlockLukeList

			// 勾选卢克
			if (options.cid == 1) {
				this.ifshow = true
				let ordersString = decodeURIComponent(options.unlockLukeList);
				this.tableData = JSON.parse(ordersString);
			}
			this.cid = parseInt(options.cid)
			this.getOrderInfo();
		},
		onShow() {
			this.submiting = false;
			//余额显示
				this.$api.pursedetailId(res => {
					if (res.status) {
					this.payVal= res.data.balance
					}

				})
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh()

			}, 1000)
				this.getWalletStatus()
		},
		methods: {
			getWalletStatus() {
				this.$api.userInfo({}, res => {
					if (res.status && res.data.walletStatus) {
						this.walletStatus = res.data.walletStatus;
						// uni.setStorage('walletStatue', res.data.walletStatus)
					}
				})
			},
			bindingClose() {
				this.$refs.bindingDialog.close()
			},
			bindingCheck() {
				this.$refs.bindingDialog.close()
				uni.navigateTo({
					url: '/pages/user/wallet_system/wallet_system'
				})
			},
			pay_type_change: function(e) {
				this.$emit('change_type', e.detail.value)
				this.current_code = e.detail.value;
			},
			clearAllCheckboxes(e) {
				this.nftIdList = []
				if (this.maxChecked < this.tableData.length) {
					uni.showToast({
						title: '最多只能勾选' + this.maxChecked + '个',
						icon: 'none'
					});
					return;
				}
				console.log(" e.value--", e.value);
				this.tabchecked = e.value

				this.tableData.forEach(item => {
					this.$set(item, 'checked', this.tabchecked);
					if (this.tabchecked) {
						this.nftIdList.push(item.nftId);
					}
				});


			},
			handleCheckboxChange(index, item) {
				// 检查当前选中的复选框数量
				let checkedCount = this.tableData.filter(i => i.checked).length;
				var nftidsList = this.tableData[index].nftId
				const inds = this.nftIdList.indexOf(nftidsList);
				if (inds !== -1) {
					this.nftIdList.splice(inds, 1);
				} else if (checkedCount >= this.maxChecked) {
					uni.showToast({
						title: '最多只能勾选' + this.maxChecked + '个',
						icon: 'none'
					});
					return;
				} else {
					this.nftIdList.push(nftidsList);
				}
				this.$set(this.tableData[index], 'checked', !item.checked);
			},
			fp(value) {
				if (!value) {
					return '0.00';
				}
				return Number(value / 100).toFixed(2)
			},
			submit: function() {
				if (this.payWay == 7 || this.current_code == 'balancepay') {
					//小于余额提示 payVal 总余额     this.orderInfo.amount商品价格
				 if(parseInt(this.payVal)<parseInt(this.fp(this.orderInfo.amount))){
					 this.tiMesee='系统钱包余额不足'
					 	this.$refs.bindingDialog.open()
				 }else{
					 this.$api.purseChangeDetailList(1, val => {})
					 	let ordersString = encodeURIComponent(JSON.stringify(this.nftIdList));
					 uni.redirectTo({
					 	url: '/pages/payment/systemCashier?nftType=' + this.nftType + '&nftIdList=' + ordersString + "&payNum=" + this.orderInfo.amount + "&orderId=" + this.orderId +'&iftype=1'+'&cid='+this.cid
					 })
				 }

					return
				}
				if (this.current_code === 'huifupay') {
					this.payWay = 2
				} else if (this.current_code === 'sdpay') {
					this.payWay = 5
				}
				let body = {
					orderId: this.orderId,
					type: this.nftType,
					payWay: this.payWay,
					nftIdList: this.nftIdList
				};
				if (!this.payWay) {
					uni.showToast({
						icon: 'none',
						title: '需要选择支付方式'
					})
					return false
				}
				if (!this.submiting) {
					this.submiting = true;
					setTimeout(() => {
						this.submiting = false
					}, 5000);

					this.$api.payHfOrderBatch(body, res => {
						if (res.status) {
							let url = res.data;
							// #ifdef H5
							window.location.href = url;
							// #endif
							// #ifdef APP-PLUS
              uni.setStorageSync('sdUrl', url);
              uni.navigateTo({
                url: `/pages/user/webview/sdWebview`
              })
							// #endif
						} else {
							this.$common.errorToShow(res.message)
						}
					});
				} else {
					this.$common.errorToShow('操作太快了稍后再试');
				}
			},

			changeType: function(type) {
				this.pay_type = type
			},
			// 获取订单详情
			getOrderInfo() {
				let data = {
					ids: this.orderId,
					payment_type: this.type
				};
				this.$api.orderBatchDetail(this.orderId, res => {
					if (res.status) {
						this.orderInfo = res.data
						this.maxChecked = res.data.quantity
					}
				})
			},
			// 获取用户信息
			getUserInfo() {
				this.$api.userInfo({}, res => {
					if (res.status) {
						this.userInfo = res.data;
					} else {
						this.$common.errorToShow(res.msg);
					}
				});
			},
			// 跳转我的余额页面
			toRecharge() {
				this.$common.navigateTo('/pages/member/balance/index');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		padding: 0 40rpx;
		margin-top: 40rpx;

	}

	.collection_info {
		width: 100%;
		background-color: rgba(255, 255, 255, .9);
		padding: 20rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;

		.collect_image {
			width: 180rpx;
			height: 180rpx;
			margin-right: 22rpx;
		}

		.title {
			font-size: 28rpx;
			color: #000;
			font-weight: 400;
		}

	}

	.pay_type_list {
		width: 100%;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: $bg-box;
	}

	// .choose_title {
	// 	height: 100rpx;
	// 	width: 100%;
	// 	display: flex;
	// 	align-items: center;
	// 	font-size: 28rpx;
	// 	font-weight: bold;
	// 	color: #fff;
	// }
	.order_info_item {
		padding: 10rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		color: #666;
		font-weight: 400;
	}

	.order_info_box {
		width: 100%;
		background-color: $bg-box;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-top: 20rpx;
	}


	.uni-group {
		display: flex;
		align-items: center;
	}

	//表格
	.table-container {
		margin-top: 29rpx;
		width: 100%;
		border-collapse: collapse;
	}

	.table-header {
		width: 100%;
	}

	.table-header,
	.table-row {
		display: flex;
		align-items: center;
	}

	.table-cell {
		// flex: 1;
		height: 110rpx;
		padding: 10rpx 6rpx;
		border: 1px solid #e7e7e7;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		word-break: break-all;
	}

	.error-message {
		color: red;
		text-align: center;
		margin-top: 10px;
	}

	.activity_detail_purple {
		box-shadow: 2rpx 2rpx 12rpx 4rpx #51515166;
		background-clip: padding-box, border-box;
		box-shadow: inset 0rpx 0rpx 50rpx 0rpx rgba(254, 162, 221, 0.91);
		background-color: #fff;
	}

	.activity_detail_black {
		border: 6px solid transparent;
		border-radius: 16px;
		background-clip: padding-box, border-box;
		background-origin: padding-box, border-box;
		background-image: linear-gradient(to right, #ffffffe6, #ffffffe6), linear-gradient(180deg, rgba(244, 249, 123, 1), rgba(84, 203, 122, 1));
	}

	.pay_icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 30rpx;

	}

	.pay_item {
		width: 100%;
		padding: 0 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1rpx solid #d4d4d4;

		/* background-color: #fff; */
		/* box-shadow: 0rpx -5rpx 10rpx 1rpx rgba(0, 0, 0, 0.16); */
		height: 100rpx;
		/* margin-bottom: 30rpx; */
		box-sizing: border-box;
		// border-radius: 20rpx;
	}

	/deep/ .uni-radio-input.uni-radio-input-checked {
		border: 1px solid var(--topicAdaptationColors) !important;
		background: var(--selBcakborder) !important;
	}

	/deep/ uni-radio .uni-radio-input {
		width: 26rpx;
		height: 26rpx;
		// border-color: #E98589 !important;
	}

	// /deep/ uni-radio:not([disabled]) .uni-radio-input:hover {
	// 	border-color: #E98589 !important;
	// }

	// /deep/ .uni-radio-input.uni-radio-input-checked {
	// 	border-color: #E98589 !important;
	// 	background-color: #E98589 !important;
	// }

	// /deep/ uni-radio .uni-radio-input.uni-radio-input-checked:before {
	// 	font-size: 12rpx;
	// }
</style>

